<template>
  <div class="v-header">
    <v-header title="我的订单">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </span>
    </v-header>
    <div class="v-main">
      <ul class="dnav g-clearfix">
        <li @click="hoverClick('tab-container1')" v-bind:class="[active=='tab-container1'?'activeli':'']">
          <span>待使用</span>
        </li>
        <li @click="hoverClick('tab-container2')" v-bind:class="[active=='tab-container2'?'activeli':'']">
          <span>已使用</span>
        </li>
        <li @click="hoverClick('tab-container3')" v-bind:class="[active=='tab-container3'?'activeli':'']">
          <span>已取消</span>
        </li>
      </ul>
      <div class="slide_block">
        <mt-tab-container v-model="active">
          <mt-tab-container-item id="tab-container1">
            <div class="erbox" v-if="noUseList.length === 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore1" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist" :class="{'expOrder':item.status === '6'}" v-for="item in noUseList" :key="item.orderId">
                <div class="dlist">
                  <p>{{item.besType=="DB"?"酒后代驾":(item.besType=="JCTC"?"机场P+R停车":(item.smallServiceTypeCode=="SLS0002"?"机场贵宾厅":"高铁贵宾厅"))}}<span v-if="item.besType=='DB'" class="order_xg" @click="orderXG(item.bespeakId)">修改</span><span v-if="!(item.smallServiceTypeCode=='SLS0002' || item.smallServiceTypeCode=='SLS0003')" class="order_tk" @click="orderQx(item.bespeakId)">取消</span></p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">预约时间：</td>
                        <td class="td2">{{item.bespeakTime}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img v-if="item.status === '6'" class="expImg" src="@/assets/images/icon_ygq.png" width="80" alt="已过期">
                </div>
                <div class="tCode" @click="showDetail(item.bespeakId,item.besType,item.smallServiceTypeCode)">
                  <span>订单详情</span>
                </div>
              </div>
              <div  v-if="noUseList.length != 0">
                <p style="text-align:center;color: #333;"><span style="text-decoration: underline;" @click="$router.push('/orderRules')">修改和取消订单须知>></span></p>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container2">
            <div class="erbox" v-if="usingList.length == 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore2" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist expOrder" v-for="item in usingList" :key="item.orderId">
                <div class="dlist">
                  <p>{{item.besType=="DB"?"酒后代驾":(item.besType=="JCTC"?"机场P+R停车":(item.smallServiceTypeCode=="SLS0002"?"机场贵宾厅":"高铁贵宾厅"))}}</p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">预约时间：</td>
                        <td class="td2">{{item.bespeakTime}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="tCode">
                  <span>订单详情</span>
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
          <mt-tab-container-item id="tab-container3">
            <div class="erbox" v-if="tkList.length === 0">没有记录</div>
            <mt-loadmore :top-method="loadTop" ref="loadmore3" style="overflow:visible;">
              <!-- <mt-cell> -->
              <div class="recordlist" :class="{'expOrder':item.status == '6' || item.status == '7'}" v-for="item in tkList" :key="item.orderId">
                <div class="dlist">
                  <p>{{item.besType=="DB"?"酒后代驾":(item.besType=="JCTC"?"机场P+R停车":(item.smallServiceTypeCode=="SLS0002"?"机场贵宾厅":"高铁贵宾厅"))}}</p>
                  <table>
                    <tbody>
                      <tr>
                        <td class="td1">下单时间：</td>
                        <td class="td2">{{item.createTime}}</td>
                      </tr>
                      <tr>
                        <td class="td1">预约时间：</td>
                        <td class="td2">{{item.bespeakTime}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <img class="expImg" src="@/assets/images/icon_yqx.png" width="80" alt="已退款">
                </div>
                <div class="tCode">
                  <span>订单详情</span>
                </div>
              </div>
              <!-- </mt-cell> -->
            </mt-loadmore>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>

    </div>

    

    <mt-popup v-model="popupShow" pop-transition="popup-fade" style="width:75%;border-radius:10px;">
        <div class="pTitle">
          <p>• {{detailInfo.besType=="DB"?"酒后代驾":(detailInfo.besType=="JCTC"?"机场P+R停车":(detailInfo.smallServiceTypeCode=="SLS0002"?"机场贵宾厅":"高铁贵宾厅"))}} •</p>
        </div>
        <div class="popup_con">
          <table>
            <tbody>
              <tr>
                <td class="td1">姓名：</td>
                <td class="td2">{{detailInfo.userName}}</td>
              </tr>
              <tr>
                <td class="td1">联系方式：</td>
                <td class="td2">{{detailInfo.telephone}}</td>
              </tr>
              <tr v-show="detailInfo.startAddress">
                <td class="td1">起始地：</td>
                <td class="td2">{{detailInfo.startAddress}}</td>
              </tr>
              <tr v-show="detailInfo.endAddress">
                <td class="td1">目的地：</td>
                <td class="td2">{{detailInfo.endAddress}}</td>
              </tr>
              <tr v-show="detailInfo.airportName">
                <td class="td1">机场名称：</td>
                <td class="td2">{{detailInfo.airportName}}</td>
              </tr>
              <tr v-show="detailInfo.startFlightNumber">
                <td class="td1">出发航班号：</td>
                <td class="td2" v-show="detailInfo.startFlightNumber">{{detailInfo.startFlightNumber}}</td>
              </tr>
              <tr v-show="detailInfo.returnFlightNumber">
                <td class="td1">返程航班号：</td>
                <td class="td2" v-show="detailInfo.returnFlightNumber">{{detailInfo.returnFlightNumber}}</td>
              </tr>
              <tr v-show="detailInfo.bespeakTime">
                <td class="td1">预约时间：</td>
                <td class="td2">{{detailInfo.bespeakTime}}</td>
              </tr>
              <tr v-show="detailInfo.	backCarTime">
                <td class="td1">取车时间：</td>
                <td class="td2">{{detailInfo.	backCarTime}}</td>
              </tr>
              
              <tr v-show="detailInfo.viprName">
                <td class="td1">贵宾室名称：</td>
                <td class="td2">{{detailInfo.viprName}}</td>
              </tr>
              <tr v-show="detailInfo.carType">
                <td class="td1">服务车型：</td>
                <td class="td2">{{detailInfo.carType}}</td>
              </tr>
              <tr v-show="detailInfo.carId">
                <td class="td1">车牌号：</td>
                <td class="td2">{{detailInfo.carId}}</td>
              </tr>
              <tr v-show="detailInfo.personNumber">
                <td class="td1">出行人数：</td>
                <td class="td2">{{detailInfo.personNumber}}人</td>
              </tr>
              <tr v-show="detailInfo.days">
                <td class="td1">停车天数：</td>
                <td class="td2">{{detailInfo.days}}天</td>
              </tr>
              <!-- <tr v-show="detailInfo.remark">
                <td class="td1">备注：</td>
                <td class="td2">{{detailInfo.remark}}</td>
              </tr> -->
              	
            </tbody>
          </table>
        </div>
        <div class="button-box" v-on:click="popClick()">
          <p>返回</p>
        </div>
    </mt-popup>
  </div>
</template>

<script>
import vHeader from '@/components/Header.vue';
import { Resource } from '@/services/resource';
import { MessageBox, Toast } from 'mint-ui';
import imgSuncar from '@/assets/images/suncar.png';

export default {
  name: 'order',
  components: {
    vHeader
  },
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      active: 'tab-container1',
      noUseList: [],
      usingList: [],
      tkList: [],

      popupShow:false,
      detailInfo:new Object()
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    popClick(){
      this.popupShow=false;
    },
    // 订单详情
    showDetail(id,besType,smallServiceTypeCode) {
      let that=this;
      this.$store.dispatch('openLoading');
      Resource.getBespeakInfoDTO
          .post({}, {bespeakId:id})
          .then(res => {
            that.$nextTick(() => {
              that.$store.dispatch('closeLoading');
            });
            if (res.head.resultCode == '000000') {//已发送
                let list = res.body || {};
                if (list && JSON.stringify(list) != "{}") {
                  this.detailInfo = list;
                  if(this.detailInfo.bespeakTime && this.detailInfo.backCarTime) {
                      let dateSpan,tempDate,iDays,sDate1,sDate2;
                      sDate1 = Date.parse(this.detailInfo.bespeakTime);
                      sDate2 = Date.parse(this.detailInfo.backCarTime);
                      dateSpan = sDate2 - sDate1;
                      dateSpan = Math.abs(dateSpan);
                      console.log(dateSpan / (24 * 3600 * 1000))
                      iDays = Math.round(dateSpan / (24 * 3600 * 1000));
                      this.detailInfo.days  = iDays
                  }
                  this.detailInfo.besType=besType;
                  this.detailInfo.smallServiceTypeCode=smallServiceTypeCode;
                  this.popupShow=true;
                }
                
            }
          })
          .catch(err => {
            that.$nextTick(() => {
              that.$store.dispatch('closeLoading');
            });
            console.log(err);
          });
    },
    // 加载更多数据
    loadTop() {
      console.log('下拉刷新');
      var that = this;
      this.getOrderList().then(res => {
        console.log(res);
        Toast({ message: '更新成功', position: 'middle' });
        if (this.active === 'tab-container1') {
          that.$refs.loadmore1.onTopLoaded();
        } else if (this.active === 'tab-container2') {
          that.$refs.loadmore2.onTopLoaded();
        } else if (this.active === 'tab-container3') {
          that.$refs.loadmore3.onTopLoaded();
        }
      });
    },
    // 获取订单列表
    getOrderList() {
      return Resource.selectBespeakOrder
          .post({}, {})
          .then(res => {
            if (res.head.resultCode == '000000') {//已发送
                let list = res.body || [];
                console.log(list)
                if (list.length > 0) {
                  this.noUseList = list.filter(item => item.status == '1' || item.status == '2' || item.status == '3' || item.status == '8');
                  this.usingList = list.filter(item => item.status == '5' );
                  this.tkList = list.filter(item => item.status == '6' || item.status == '7');
                }
                return res;
            }
          })
          .catch(err => {
            console.log(err);
          });
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    hoverClick(indx) {
      this.active = indx;
    },
    //  取消
    orderQx(orderId) {
      var that=this;
      const msgBox = MessageBox({
        title: '提示',
        message: '是否确认发起取消？',
        showCancelButton: true
      });
      msgBox.then(action => {
        if (action === 'confirm') {
          Resource.cancelBespeak.post({}, { bespeakId:orderId }).then((res) => {
            if (res.head.resultCode == '000000') {
               MessageBox.alert(
                  '<span style="text-align:center;display:inline-block;word-break:break-word;">尊敬的用户，您的订单已取消成功！</span>'
                ).then(action => {
                  if (action === 'confirm') {
                    this.active = 'tab-container3';
                    that.loadTop();
                  }
                });
            }else{
              Toast({
                message: res.head.resultMsg,
                position: 'middle'
              });
            }
           
          });
        }
      });
    },
    //  修改
    orderXG(orderId) {
      sessionStorage.orderId=orderId;
       this.$router.push('/drinkDrivingModify');
    }
  }
};
</script>

<style lang="less" scoped>
@import url('./order.less');
</style>
